<template>
    <a-layout-sider collapsible v-model:collapsed="collapsed">

        <div style="text-align: center;height: 80px;color: white;">
            <div v-if="collapsed" style="padding: 8%;">
                <span style="font: italic 400 24px 微软雅黑;">GT</span>
                <br />
                <span>后台管理</span>
            </div>
            <div v-else style="padding: 8%;">
                <span style="font: italic 400 24px 微软雅黑;">GTenACGN</span>
                <br />
                <span>后台管理站点</span>
            </div>
        </div>

        <a-menu theme="dark" mode="inline" @click="handleMenuClick" v-model:selectedKeys="selectedKeys">

            <a-menu-item key="home">
                <desktop-outlined />
                <span>工作台</span>
            </a-menu-item>

            <a-sub-menu>
                <template #title>
                    <span>
                        <FileMarkdownOutlined />
                        <span>漫画管理</span>
                    </span>
                </template>
                <a-menu-item key="cartoon">信息表</a-menu-item>
                <a-menu-item key="cartoonType">类型表</a-menu-item>
                <a-menu-item key="relationCartoonType">类型对应表</a-menu-item>
                <a-menu-item key="relationCartoonAuthor">作者对应表</a-menu-item>
            </a-sub-menu>

            <a-sub-menu>
                <template #title>
                    <span>
                        <BookOutlined />
                        <span>电子书管理</span>
                    </span>
                </template>
                <a-menu-item key="novel">信息表</a-menu-item>
                <a-menu-item key="novelType">类型表</a-menu-item>
                <a-menu-item key="relationNovelType">类型对应表</a-menu-item>
                <a-menu-item key="relationNovelAuthor">作者对应表</a-menu-item>
            </a-sub-menu>

            <a-menu-item key="author">
                <UserOutlined />
                <span>作者管理</span>
            </a-menu-item>

            <a-menu-item key="admin">
                <BugOutlined />
                <span>管理员列表</span>
            </a-menu-item>

            <a-menu-item key="file">
                <file-outlined />
                <span>文件管理</span>
            </a-menu-item>

            
        </a-menu>

    </a-layout-sider>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import useBaseStore from '@/stores/baseStore.ts'

const baseStore = useBaseStore();

const collapsed = ref(false)
const selectedKeys = ref<string[]>([]);


watch(
    () => baseStore.route,
    () => {
        const arr = new Array();
        arr.push(baseStore.getRoute);
        selectedKeys.value = arr;
    }
)


function handleMenuClick(arg: any) {
    baseStore.updateRoute(arg.key)
}


</script>

<style scoped></style>